<template>
  <div class="content">
    <van-nav-bar title="站点详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="title">{{ title }}</div>
    <div class="button-item add-top">
      <div class="button-item-top">
        <div class="button-title">直放站名称:</div>
        <van-button :type="primaryType === 0?'primary':'default'" @click="clickImg(0)">1#电梯</van-button>
        <van-button :type="primaryType=== 1?'primary':'default'" @click="clickImg(1)">2#</van-button>
        <van-button :type="primaryType === 2?'primary':'default'" @click="clickImg(2)">地下车库</van-button>
      </div>
      <div class="button-item-top">
        <div class="button-title">设备类型:</div>
        <van-button :type="defaultType === 0?'primary':'default'" @click="showPop(0)">主机单元</van-button>
        <van-button :type="defaultType === 1?'primary':'default'" @click="showPop(1)">扩展单元</van-button>
        <van-button :type="defaultType === 2?'primary':'default'" @click="showPop(2)">远端单元</van-button>
      </div>
      <!-- <van-dropdown-menu active-color="#eb4b4b;">
        <van-dropdown-item :value="value1" :options="option1" />
      </van-dropdown-menu> -->
    </div>
    <div class="imgItem">
      <canvas-img 
        ref="canvas"
        id="canvasId3" 
        :floor="true" 
        :plus="true"
        :width="canvasWidth"
        :height = "canvasHeight"
        :active="active"
        ></canvas-img>
    </div>
    <van-popup position="bottom" :style="{ height: '100%', background: 'rgba(0,0,0,0.3)' }" :overlay="false"
      v-model="showPopup">
      <div class="tips-bg">

        <van-form ref="form">
          <van-field label="站址名称:" :value="title" disabled>
            <!-- <template #select>
            </template> -->
          </van-field>
          <van-field label="站址编码:" v-model="form.stationCode"></van-field>
          <van-field label="安装位置:" v-model="form.stationAddress"></van-field>
          <van-field label="设备SN:" v-model="form.devicesSN"></van-field>
        
          <div class="img-item">
            <div style="font-size: 16px;padding:5px 15px">
              施工照片:
            </div>
          </div>
        </van-form>
        <div class="tips-header">
          <van-button size="small" type="default" style="margin:10px; width: 100px;" @click="onCancel"> 取消</van-button>
          <van-button type="danger" size="small" style="margin-right: 10px;width: 100px;"
            @click="onConfirm">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import floorImg from '../../assets/floor.png';
import  testApi from '@/api/test.js'
import canvasImg from '@/components/canvasImg'
export default {
  name: 'InstalledDetail',
  components:{
    canvasImg
  },
  data() {
    return {
      PopupData: {
        title: '',
      },
      primaryType: 'primary',
      primaryType1: 'default',
      primaryType2: 'default',
      defaultType: 'primary',
      defaultType1: 'default',
      defaultType2: 'default',
      showPopup: false,
      option1: [
        { text: "1F", value: 1 },
        { text: "2F", value: 2 },
        { text: "3F", value: 3 },
        { text: "4F", value: 4 },
        { text: "5F", value: 5 }
      ],
      value1: 0,
      title: '',
      active: 0,
      value: '',
      scale: 1,
      canvas: null,
      ctx: null,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0,
      dragable: false,
      offsetX: 0,
      offsetY: 0,
      singleClick: true,
      img: null,
      iconImg: null,
      form:{},
      canvasWidth:0,
      canvasHeight:0,
    };
  },
  created() {
    this.title = this.$route.query.title
    // console.log(this.$route.query.title)
    this.canvasWidth = window.screen.width;
    this.canvasHeight = window.screen.height -310;
  },
  methods: {
    showPop(type) {
      // this.primaryType='default'
      this.defaultType = type
      this.showPopup = true
    },
    clickImg(type) {
      this.primaryType=type

    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
    },
    onConfirm() {
      // this.form = Object.assign({},this.form)
      testApi.addSiteInstall(this.form).then(res=>{
        
      })
      this.showPopup = false
    },
    onCancel() {
      this.showPopup = false
    },
    
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__content {
  background-color: #fff;
  border-bottom: 1px #ccc solid;
}

::v-deep .van-nav-bar__title {
  color: #000;
}

::v-deep .van-nav-bar .van-icon {
  color: #02a7f0;
}

::v-deep .van-nav-bar__text {
  color: #02a7f0;
}

::v-deep .van-tab--active {
  color: #eb4b4b;
}

::v-deep .van-cell-group {
  margin: 13px 0;
}

::v-deep .van-cell__title {
  font-size: 18px;
  color: #000;
}

// .add-top{
//   display: flex;
//   justify-content: flex-start;
//   align-items: flex-start;
//   margin: 10px;
// }
.item {
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  height: 30px;
  justify-content: space-between;
}

.content {
  background-color: #fff;
  user-select: none;
  overflow: hidden;
}

.title {
  font-size: 18px;
  background-color: #fff;
  height: 42px;
  margin: 5px 10px;
  line-height: 42px;
  padding: 0 10px;
  border-bottom: 1px #ccc solid;
}

.button-item {
  padding: 10px 0;
}

.button-item-top {
  display: flex;
  padding: 0 5px;
  font-size: 18px;
  justify-content: space-between;
  align-items: center;
  
}

.button-title {
  display: inline-block;
  font-size: 16px;
}

.tips-bg {
  background: #fff;
  height: 50%;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.tips-header {
  text-align: center;
}

.img-item {
  display: flex;
  color: #000;
}

.imgItem {
  overflow: hidden;
}

.devices-btn-right {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;

  button {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0;
    border-top: none;

    &:first-child {
      height: 30px;
    }

    &:last-child {
      height: 30px;
    }
  }
}
</style>